﻿@page "/MultiSelect-Dropdown/Default-Functionalities"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the MultiSelect in Blazor application. Type a character in the MultiSelect element or click on this element to choose one or more items from the suggestion list.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>MultiSelect</code> component contains a list of predefined values, from that the user can choose a multiple values.</p>
   <p>In this sample, the selected items are shown with three different UI modes in three different MultiSelect elements. That three UI modes are listed here below,</p>
      <ul>
        <li><b>Default</b> - on focus-in, the component will act in <code>Box mode</code> and on blur, the component will act in <code>Delimiter mode</code>.</li>
        <li><b>Box</b> - selected items will be visualized in chip.</li>
        <li><b>Delimiter</b> - selected items will be visualized in text content.</li>
      </ul>
    <p>More information on the MultiSelect instantiation can be found in the <a href='https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="control_wrapper">
        <div id='content'>
            <div>
                <h4> Default Mode</h4>
                <SfMultiSelect TValue="string[]" TItem="GameFields" Mode="@VisualMode.Default" Placeholder="Favorite Sports" DataSource="@Games">
                    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
                </SfMultiSelect>
            </div>
            <div class="control-styles">
                <h4>Box Mode</h4>
                <SfMultiSelect TValue="string[]" TItem="GameFields" Mode="@VisualMode.Box" Placeholder="Favorite Sports" DataSource="@Games">
                    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
                </SfMultiSelect>
            </div>

            <div class="control-styles">
                <h4>Delimiter Mode</h4>
                <SfMultiSelect TValue="string[]" TItem="GameFields" Mode="@VisualMode.Delimiter" Placeholder="Favorite Sports" DataSource="@Games">
                    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
                </SfMultiSelect>
            </div>
        </div>
    </div>
</div>

@code{
    public class GameFields
    {
        public string ID { get; set; }

        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>()
{
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Golf" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "Rugby"},
        new GameFields(){ ID= "Game9", Text= "Snooker" },
        new GameFields(){ ID= "Game10", Text= "Tennis"},
    };
}

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 40px;
    }
</style>